import './css/index.css'
import { Iselected, Istates } from './types/datatype'
import { diffColor, renderDom, filterHandle } from './utils/const'
import { axiosPost } from './utils/service'
const $ = (ele: string) => {
   return <HTMLElement>document.querySelector(ele)
}
const $$ = (ele: string) => {
   return <NodeListOf<Element>>document.querySelectorAll(ele)
}
const _ = (ele: string) => {
   return <HTMLElement>document.getElementById(ele)
}
const questionlist = $('.que-list')
const diffclist = $('.diffc-list')
const checkTabs = $$('.check-tab')
const diffcTabs = $$('.diffc-tab')
const checkCotent = $('.checklist-content')
const diffcContent = $('.diffc-content')
const tagdiv = $('.tag-row')
const taglabel = $('.tag-label')
const tagdiff = $('.tag-diff')
const tagonechild = $('.tag-row-onechild')
const tagtwochild = $('.tag-row-twochild')
const maincontent = $('.main-content')
const cancelone = $('.cancelone')
const canceltwo = $('.canceltwo')

const checked: Iselected = {
   question: '',
   difficulty: '',
}
const states: Istates = {
   nowCheckedBar: '',
   nowChecked: 'all-code-essentials',
}

//顶部Tab导航栏切换
const problemTabs = $$('.relative')
problemTabs.forEach((item: any) => {
   item.addEventListener('click', () => {
      if (item.classList.contains('active')) return
      problemTabs.forEach((node) => {
         node.classList.add('hov')
         node.classList.remove('active')
      })
      states.nowChecked = item.id
      axiosPost({
         categorySlug: states.nowChecked,
         skip: 0,
         limit: 20,
         filters: filterHandle(checked),
      }).then((res: any) => {
         maincontent.innerHTML = renderDom(res)
      })
      item.classList.remove('hov')
      item.classList.add('active')
   })
})

function handleClick(ele: HTMLElement) {
   const Id = ele.id
   const nowId = states.nowCheckedBar
   if (nowId === Id) {
      ele.style.visibility = 'hidden'
      states.nowCheckedBar = ''
   } else {
      if (nowId !== '') {
         $(`#${nowId}`).style.visibility = 'hidden'
      }
      $(`#${Id}`).style.visibility = 'visible'
      states.nowCheckedBar = Id
   }
}

//选择题单类别
questionlist.addEventListener('click', () => {
   handleClick(checkCotent)
})
checkTabs.forEach((item) => {
   item.addEventListener('click', (e) => {
      const checkText = (e.target as HTMLElement).innerText
      const checkId = (e.target as HTMLElement).id
      if (checked.question === checkId) {
         checked.question = ''
         if (checked.difficulty === '') {
            tagdiv.style.display = 'none'
         }
         _(checkId).classList.remove('t')
         tagonechild.classList.add('taghidden')
         axiosPost({
            categorySlug: states.nowChecked,
            skip: 0,
            limit: 20,
            filters: filterHandle(checked),
         }).then((res: any) => {
            maincontent.innerHTML = renderDom(res)
         })
      } else {
         if (checked.question !== '') {
            _(checked.question).classList.remove('t')
            _(checkId).classList.add('t')
         } else {
            _(checkId).classList.add('t')
         }
         checked.question = checkId
         taglabel.innerText = checkText
         tagdiv.style.display = 'flex'
         tagonechild.classList.remove('taghidden')
         axiosPost({
            categorySlug: states.nowChecked,
            skip: 0,
            limit: 20,
            filters: filterHandle(checked),
         }).then((res: any) => {
            maincontent.innerHTML = renderDom(res)
         })
      }
      $('.checklist-content').style.visibility = 'hidden'
      states.nowCheckedBar = ''
   })
})

//选择难度类别
diffclist.addEventListener('click', () => {
   handleClick(diffcContent)
})
diffcTabs.forEach((item) => {
   item.addEventListener('click', (e) => {
      const checkText = (e.target as HTMLElement).innerText
      const checkId = (e.target as HTMLElement).id
      if (checked.difficulty === checkId) {
         checked.difficulty = ''
         if (checked.question === '') {
            tagdiv.style.display = 'none'
         }
         _(checkId).classList.remove('t')
         tagtwochild.classList.add('taghidden')
         axiosPost({
            categorySlug: states.nowChecked,
            skip: 0,
            limit: 20,
            filters: filterHandle(checked),
         }).then((res: any) => {
            maincontent.innerHTML = renderDom(res)
         })
      } else {
         if (checked.difficulty !== '') {
            _(checked.difficulty).classList.remove('t')
            _(checkId).classList.add('t')
         } else {
            _(checkId).classList.add('t')
         }
         checked.difficulty = checkId
         tagdiff.innerText = checkText
         tagdiv.style.display = 'flex'
         tagtwochild.style.color = diffColor(checkText)
         axiosPost({
            categorySlug: states.nowChecked,
            skip: 0,
            limit: 20,
            filters: filterHandle(checked),
         }).then((res: any) => {
            maincontent.innerHTML = renderDom(res)
         })
         tagtwochild.classList.remove('taghidden')
      }
      $('.diffc-content').style.visibility = 'hidden'
      states.nowCheckedBar = ''
   })
})

//
cancelone.addEventListener('click', () => {
   tagonechild.classList.add('taghidden')
   _(checked.question).classList.remove('t')
   checked.question = ''
   if (checked.difficulty === '') {
      tagdiv.style.display = 'none'
   }
   axiosPost({
      categorySlug: states.nowChecked,
      skip: 0,
      limit: 20,
      filters: filterHandle(checked),
   }).then((res: any) => {
      maincontent.innerHTML = renderDom(res)
   })
})
canceltwo.addEventListener('click', () => {
   tagtwochild.classList.add('taghidden')
   _(checked.difficulty).classList.remove('t')
   checked.difficulty = ''
   if (checked.question === '') {
      tagdiv.style.display = 'none'
   }
   axiosPost({
      categorySlug: states.nowChecked,
      skip: 0,
      limit: 20,
      filters: filterHandle(checked),
   }).then((res: any) => {
      maincontent.innerHTML = renderDom(res)
   })
})

document.addEventListener('DOMContentLoaded', () => {
   axiosPost({
      categorySlug: 'all-code-essentials',
      skip: 0,
      limit: 20,
      filters: {},
   }).then((res: any) => {
      maincontent.innerHTML = renderDom(res)
   })
})
